<template>
  <view>
    <view>
      <u-navbar title="骑手首页" @rightClick="rightClick"></u-navbar>
      <div>
        <view class="u-nav-slot">
          <div style="display: flex">
            <div>
              <u-icon name="map-fill" size="18"></u-icon>
            </div>
            <div class="title">深圳***食堂</div>
            <div style="margin-top: 4rpx">
              <u-icon name="arrow-down" size="16"></u-icon>
            </div>
          </div>
          <div class="box2" @click="tourl('/pages/longinsucc/index')">
            <div class="title1">选择职位</div>
            <div>
              <image
                src="https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/f028644f-a521-410b-874c-2782752e31f0.png"
                mode="scaleToFill"
                style="width: 44rpx; height: 44rpx" />
            </div>
          </div>
        </view>
        <div style="display: flex; margin: 20rpx; width: 690rpx">
          <div style="display: flex">
            <div
              :class="[isActive && 'active', isHighlighted && 'box11']"
              @click="changeType">
              取餐
            </div>
            <div
              :class="[!isActive && 'active', isHighlighted && 'box12']"
              @click="changeType">
              送餐
            </div>
          </div>
        </div>
      </div>
      <!-- 取餐卡片 -->
      <div class="card" v-show="isActive ? true : false">
        <div class="top">
          <div
            style="
              color: rgba(255, 255, 255, 1);
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 28rpx;
              position: relative;
              right: -85%;
            ">
            已取餐
          </div>
        </div>
        <div class="from-box">
          <div class="from-item" v-for="(item, index) in from">
            <div style="text-align: left">
              <text class="title3">{{ item.title1 }}</text>
              <text class="title7">李aaa</text>
            </div>
            <div
              style="display: flex; text-align: left"
              v-if="item.title2 ? true : false">
              <div class="title3">{{ item.title2 }}</div>
              <div class="title7">李aaa</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 送餐卡片 -->
      <div class="card" v-show="!isActive ? true : false">
        <div class="top box9">
          <div>博学大厦1栋（160）</div>
          <div>全部送达</div>
        </div>
        <div
          class="from-box"
          style="display: flex; justify-content: space-around">
          <div>
            <text>111</text>
            <text>111</text>
          </div>
          <div>
            <text>1111</text>
            <text>111</text>
          </div>
          <div>送达</div>
        </div>
      </div>
      <Tabbar></Tabbar>
    </view>
  </view>
</template>
<script setup>
import Tabbar from '@/components/tabbar/index.vue'
const isActive = ref(false)
const isHighlighted = ref(true)
const changeType = () => {
  isActive.value = !isActive.value
}
const from = ref([
  {
    title1: '商户：',
    title2: '店铺地址：'
  },
  {
    title1: '手机号：',
    title2: '出餐时间：'
  },
  {
    title1: '份数：',
    title2: '店铺名称：'
  }
])
const tourl = (url) => {
  uni.redirectTo({
    url
  })
}
</script>
<style>
page {
  background-image: url('https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/c81ad7c3-bd85-4ce3-b487-21ae70f60296.png');
}

page {
  background-size: cover;
}

.u-status-bar.data-v-c0b45a48 {
  background: none !important;
}

.u-navbar__content.data-v-9d9e7ee2 {
  background: none !important;
}

.u-navbar--fixed.data-v-9d9e7ee2 {
  position: relative !important;
}

.u-nav-slot {
  display: flex;
  padding: 20rpx;
  align-items: center;
  justify-content: space-between;
}

.title {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.box2 {
  width: 220rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 20rpx;
}

.title1 {
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.active {
  background: rgba(255, 99, 6, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box11 {
  width: 120rpx;
  height: 64rpx;
  border-radius: 32rpx 0rpx 0rpx 32rpx;
  background: rgba(204, 204, 204, 1);
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box12 {
  width: 120rpx;
  height: 64rpx;
  border-radius: 0rpx 32rpx 32rpx 0rpx;
  background: rgba(204, 204, 204, 1);
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 690rpx;
  height: 328rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  margin: auto;
}

.top {
  width: 690rpx;
  height: 72rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  align-items: center;
}

.from-box {
  padding: 0rpx 40rpx;
  margin: 20rpx 0rpx 0rpx;
}

.title3 {
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
}

.title7 {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.from-item {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0 0;
}
.box9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
</style>
